<template>
  <div class="login">
    <img src="../../assets/wang.png" alt="" class="tu1" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="请用网易云手机号"
        :rules="[{ required: true, message: '' }]"
        class="text"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请用网易云密码登录"
        :rules="[{ required: true, message: '' }]"
        class="passwords"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" class="Submit"
          >立即登录</van-button
        >
      </div>
    </van-form>
    <div class="experience" @click="lijitiyan">立即体验</div>
    <!-- 四个小图标 -->
    <div class="f4">
      <div>
        <img src="../../assets/weixin.png" alt="" class="t2" />
      </div>
      <div><img src="../../assets/QQ.png" alt="" class="t2" /></div>
      <div><img src="../../assets/weibo.png" alt="" class="t2" /></div>
      <div><img src="../../assets/wangyi.png" alt="" class="t2" /></div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <input type="checkbox" class="check" v-model="LL" />
      <span class="agree">同意</span>
      <span class="bai">《用户协议》</span>
      <span class="bai">《隐私政策》</span>
      <span class="bai">《儿童隐私政策》</span>
      <br />
      <span>《中国联通认证服务协议》</span>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Checkbox, Form, Toast, Field } from "vant";
import axios from "axios";
import { llb, loginuser } from "../../api/Coo";
import { setToken } from "../../utils/auth";
import { getsonglist } from "@/api/playpage";

Vue.use(Form);
Vue.use(Field);
export default {
  data() {
    return {
      username: "",
      password: "",
      LL: false,
      list: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async onSubmit(values) {
      // console.log(values);
      // console.log(this.username);
      const result = await axios.post(
        `http://192.168.31.27:3000/login/cellphone?phone=${values.username}&password=${values.password}`,
        // {
        //   phone: 15225507793,
        //   password: "llbxhx...",
        // },
        {
          withCredentials: true,
        }
      );
      console.log(result);
      localStorage.setItem("cookie", result.data.cookie);
      // if (this.LL == true) {
      //   if (result.data.code == 200) {
      //     Toast.success("登录成功");
      //     this.$router.push("/search");
      //     setToken(result.data.token);
      //   } else {
      //     Toast.success("登录失败");
      //   }
      // } else {
      //   Toast.success("请同意用户协议在登录");
      // }
      if (this.LL == false) {
        Toast.fail("请同意用户协议在登陆");
      } else {
        console.log(result);
        if (result.data.code == 200) {
          Toast.success("登录成功");
          setToken(result.data.token);
          this.$router.push("/search");
          // console.log(result);
        } else {
          Toast("账号或密码错误");
        }
      }
    },
    async Sign(values) {},
    lijitiyan() {
      this.$router.push("/home");
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
.login {
  background-image: url(../../assets/wyy1.webp);
  width: 100vw;
  height: 100vh;
}
.tu1 {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  padding-top: 80px;

  z-index: 10;
}
.Submit {
  display: block;
  background: #fff;
  width: 280px;
  height: 40px;
  margin: 0 auto;
  color: red;
  border: 1px solid #fff;
  font-size: 15px;
  margin-top: 20px;
  text-align: center;
}
.text {
  /* display: block; */
  margin: 0 auto;
  width: 280px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 60px;
  margin-top: 100px;
  line-height: 15px;
  color: darkgrey;
}
.passwords {
  /* display: block; */
  margin: 0 auto;
  width: 280px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 60px;
  margin-top: 20px;
  line-height: 15px;
  color: darkgrey;
}
.van-field__control {
  background: transparent;
}
.login .experience {
  margin: 0 auto;
  width: 190px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(172, 168, 168, 0.384);
  padding-bottom: 10px;
}
.f4 {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
}
.t2 {
  width: 30px;
  height: 30px;
}
.check {
  width: 15px;
  height: 15px;
  margin-top: 9px;
  margin-left: 20px;
  text-align: center;
}
.agree {
  margin-left: 15px;
  line-height: 36px;
  color: rgb(143, 138, 138);
}
.bai {
  margin-right: 10px;
  font-size: 12px;
  color: #fff;
}
span:nth-child(7) {
  margin-left: -40px;
  color: #fff;
  font-size: 12px;
}
.bottom {
  text-align: center;
}
</style>
